<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
//axios的基本使用
/*
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1/api'
let p = axios({
    url: '/login',
    method: 'post',
    data: {
        username: 'zs',
        password: '123'
    }
})

axios({
    url: '/users',
    method: 'get',
    params: {
        page: 1,
        size: 10
    }
})
p.then((res)=>{
    console.log(res)
})
*/

// 高级api-create,用来解决什么问题?
// create解决项目当中有多个请求地址,会让代码更好维护
import axios from 'axios'
const request1 = axios.create({
    baseURL: 'http://127.0.0.1/api'
})
const request2 = axios.create({
    baseURL: 'http://www.itcast.cn/api'
})
let p = request1({
    url: '/login',
    method: 'post',
    data: {
        username: 'zs',
        password: '123'
    }
})

request2({
    url: '/users',
    method: 'get',
    params: {
        page: 1,
        size: 10
    }
})



//在vue当中使用axios(简单使用)
// 简单项目
/*
//main.js
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1/api'
Vue.prototype.$axios = axios
//页面当中
export default{
    async created(){
        let res = await this.$axios({
            url: '/login',
            method: 'post',
            data: {
                username: 'zs',
                password: '123'
            }
        })
    }
}
*/ 
// 在vue当中使用axios(标准使用)
// 中大型项目
/*
// utils/request.js 
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1/api'
export default axios
// api/user.js
import request from '../utils/request.js'
export function login(data){
    return request({
        url: '/login',
        method: 'post',
        data
    })
}
// 页面中
import {login} from '../api/user.js'
export default{
    async created(){
        let res = await login({username: 'zs', password: '123'})
    }
}
*/
</script>
</html>